<template>
  <div>
    <h2>余额查询</h2>
    <form @submit.prevent="queryBalance">
      <!-- <div>
        <label>账号:</label>
        <input v-model="account" placeholder="请输入账号" required />
      </div> -->
      <button type="submit">查询余额</button>
    </form>
    <div v-if="balance !== null">
      <p><strong>余额:</strong> {{ balance }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { ref } from 'vue'

export default {
  name: 'QueryBalance',
  setup() {
    const account = ref('')
    const balance = ref(null)

    const queryBalance = async () => {
      try {
        // 请求参数通过请求体传递
        // const response = await axios.post('/api/balance', { account: account.value })
        const response = await axios.post('/api/balance', { account: "null" })
        // 假设返回的数据格式为：{ balance: 100 }
        balance.value = response.data.balance
      } catch (error) {
        console.error(error)
        alert('查询余额失败')
      }
    }

    return { account, balance, queryBalance }
  }
}
</script>